import { layoutState, routerState } from '@/state';
import { IMenuRoute } from '@/types';
import { getUserInfo, tsRoutes2Menus } from '@/utils';
import { Menu } from '@arco-design/web-react';
import { IconMenuFold, IconMenuUnfold } from '@arco-design/web-react/icon';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useRecoilState, useRecoilValue } from 'recoil';

import './index.scss';

const {
    SubMenu,
    Item: MenuItem
} = Menu;

/**
 * 侧边栏-菜单
 */
export default memo(
    function HopetoSider() {
        const navigate = useNavigate();
        const [menuSelect, setMenuSelect] = useState('home');
        const user = useMemo(() => getUserInfo(), []);

        const routes = useRecoilValue(routerState);
        const menuConfig = useMemo(() => tsRoutes2Menus(routes, navigate), [routes]);
        const routeMenuMap = useMemo(() => {
            const map = new Map();
            function traverse(items: IMenuRoute[], routePrefix = '') {
                for (const d of items) {
                    if (d.route) {
                        map.set(routePrefix + d.route, d.key);
                    }
                    if (d.children) {
                        traverse(d.children, routePrefix + (d.route || ''));
                    }
                }
            }
            traverse(routes);
            return map;
        }, [routes, user]);

        const [layout, setLayout] = useRecoilState(layoutState);

        const toggleMenuCollapsed = useCallback(() => {
            setLayout(prev => ({
                menusCollapsed: !prev.menusCollapsed
            }));
        }, []);

        const location = useLocation();

        useEffect(() => {
            const pathname = location.pathname;
            const menuKey = routeMenuMap.get(pathname);
            setMenuSelect(menuKey!);
        }, [location]);

        return (
            <div className="hopeto-sider">
                <Menu
                    style={{ width: 200, height: '100%' }}
                    selectedKeys={[menuSelect]}
                    collapse={layout.menusCollapsed}
                    // mode='popButton'
                // defaultOpenKeys={menuConfig.map(d => d.key)}
                >
                    {
                        menuConfig.filter(e => {
                            return (e.role === undefined || e.role === user.type)
                        }).map(d => (
                            <SubMenu
                                key={d.key}
                                title={<>{d.icon}{d.label}</>}
                            >
                                {
                                    (d.children || []).filter(e => {
                                        return (e.role === undefined || e.role === user.type)
                                    }).map(m => {
                                        if (m.children) {
                                            return <SubMenu key={m.key} title={<>{m.icon}{m.label}</>} >
                                                {
                                                    (m.children || []).filter(e => {
                                                        return (e.role === undefined || e.role === user.type)
                                                    }).map(c => (
                                                        <MenuItem key={c.key} onClick={c.onClick}>
                                                            {c.label}
                                                        </MenuItem>
                                                    ))
                                                }
                                            </SubMenu>
                                        } else {
                                            return <MenuItem key={m.key} onClick={m.onClick}>
                                                {m.label}
                                            </MenuItem>
                                        }

                                    })
                                }
                            </SubMenu>
                        ))
                    }
                </Menu>
                <div className="collapse-btn" onClick={toggleMenuCollapsed}>
                    {layout.menusCollapsed ? <IconMenuUnfold /> : <IconMenuFold />}
                </div>
            </div>
        );
    }
);
